<template>
	<view>
		<view class="nav">
			<u-tabs
				itemStyle="padding-left: 24rpx; padding-right: 24rpx; height: 88rpx;"
				:inactiveStyle="{
					color: ' #646566',
					fontSize: '28rpx'
				}"
				:activeStyle="{
					color: '#323233',
					fontSize: '28rpx'
				}"
				lineColor="#ee0a24"
				lineWidth="40"
				:list="list1"
				@click="click"
				:current="active"
			></u-tabs>
		</view>
		<view class="">
			<view class="title">
				<h2>{{ biaoti.name }}</h2>
				<view>{{ biaoti.front_desc }}</view>
			</view>
			<view class="fl-box">
				<view class="gl"></view>
				<view class="fen-box">
					<view class="xq" v-for="(item, index) in shuju" :key="index" @tap="pushDetail(item.id)">
						<image :src="item.list_pic_url" mode="widthFix"></image>
						<view class="bt">{{ item.name }}</view>
						<view class="jg">￥ {{ item.retail_price }} 元</view>
					</view>
				</view>
			</view>
		</view>
		<view><u-loading-icon class="jiazai" :show="isShow" color="white" size="50" mode="semicircle" text="加载中..." textSize="18" :vertical="true"></u-loading-icon></view>
	</view>
</template>

<script>
import { gosApi, listApi } from '../../utils/api.js';
export default {
	data() {
		return {
			list1: [],
			active: 0,
			flid: 0,
			biaoti: [],
			shuju: [],
			isShow: false,
			idc: 0
		};
	},
	methods: {
		// 跳转详情页
		pushDetail(id) {
			console.log(1);
			uni.navigateTo({
				url: `/pages/myDetail/myDetail?id=${id}`
			});
		},
		async click(index) {
			this.isShow = true;
			this.active = index.index;
			this.flid = index.id;
			this.shu();
			this.api();
			setTimeout(() => {
				this.isShow = false;
			}, 500);
		},
		async shu() {
			let res1 = await listApi({
				categoryId: this.flid,
				page: 1,
				size: 1000
			});
			this.shuju = res1.data.goodsList;
		},
		async api() {
			let res = await gosApi({
				id: this.flid
			});
			let { brotherCategory, currentCategory } = res.data;
			this.list1 = brotherCategory;
			this.biaoti = currentCategory;
			let arr = this.list1;
			let idc = this.flid;
			for (let i = 0; i < arr.length; i++) {
				if (arr[i].id == idc) {
					this.active = i;
				}
			}
		}
	},
	async onLoad(qu) {
		this.idc = qu.id;
		this.flid = qu.id;
		this.isShow = true;
		this.api();
		this.shu();
		setTimeout(() => {
			this.isShow = false;
		}, 500);
	}
};
</script>

<style scoped lang="scss">
.nav {
	padding: 0 16rpx;
	font-size: 14px;
	color: #646566;
}
.title {
	text-align: center;
	background: #efefef;
	h2 {
		font-size: 36rpx;
		height: 100rpx;
		line-height: 100rpx;
		color: #333;
	}
	view {
		height: 60rpx;
		line-height: 60rpx;
		color: #666;
		font-size: 28rpx;
	}
}
.fl-box {
	.gl {
		height: 100rpx;
	}
	.fen-box {
		padding: 20rpx;
		display: flex;
		flex-wrap: wrap;

		.xq {
			width: 49%;
			text-align: center;
			margin-bottom: 20rpx;
			padding-bottom: 20rpx;
			image {
				width: 100%;
			}
			.bt {
				font-size: 28rpx;
				color: #333;
			}
			.jg {
				font-size: 28rpx;
				margin-top: 5px;
				color: darkred;
			}
		}
	}
}
.jiazai {
	background-color: #000;
	width: 260rpx;
	height: 260rpx;
	margin: auto;
	border-radius: 50rpx;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
</style>
